<%@page import="Forum.ForumThreadForm"%>
<%@ taglib uri="/WEB-INF/tld/struts-html.tld" prefix="html"%>
<%@ taglib uri="/WEB-INF/tld/struts-logic.tld" prefix="logic"%>
<%@ taglib uri="/WEB-INF/tld/struts-bean.tld" prefix="bean"%>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="/WebFinalProject/css/FinalProjectCSS.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="js/MasterJS.js"></script>
<!-- <script src="/WebFinalProject/js/jquery.js"></script> -->
<script language="javascript">
// function appendText(){
// 	//alert("as");
// 	var foo = document.getElementById("divOption");
// 	var a = document.createElement("label");
// 	a.appendChild(document.createTextNode("Insert Answer : "));
// 	foo.appendChild(a);
	
// 	var element = document.createElement("input");
// 	//Assign different attributes to the element.
// 	element.setAttribute("type", "text");
// 	element.setAttribute("name", "txtOption");
// 	foo.appendChild(element);
	
// 	var c = document.createElement("input");
// 	c.setAttribute("type", "checkbox");
// 	c.setAttribute("name", "c");
// 	//Append the element in page (in span).
// 	foo.appendChild(c);
	
// 	var b = document.createElement("br");
// 	foo.appendChild(b);
// }
// 	function save() {
// 		var classId = new Array();
// 		var classWeight = new Array();
// 		var classWeightVal = 0;
// 		classId = document.getElementsByName('classId');
// 		classWeight = document.getElementsByName('classWeight');
// 		if (!validateForm(document.forms[0])) {
// 			return;
// 		}
// 		for ( var i = 0; i < classId.length; i++) {
// 			if(classId[i].value != 0){
// 				if(classWeight[i].value == ""){
// 					alert('Class Weight Required');
// 					return;
// 				}else{
// 					classWeightVal += parseInt(classWeight[i].value);
// 					if(classWeightVal > 100){
// 						alert('Class Weight Total Must be 100');
// 						return;
// 					}
// 				}
// 			}
// 		}
// 		if(classWeightVal < 100){
// 			alert('Class Weight Total Must be 100');
// 			return;
// 		}
	
// 	function appendText(tableID) {
	
// 	    var table = document.getElementById(tableID);
	
// 	    var rowCount = table.rows.length;
// 	    var row = table.insertRow(rowCount);
	
// 	    var colCount = table.rows[0].cells.length;
	
// 	    for(var i=0; i<colCount; i++) {
// 	        var newcell = row.insertCell(i);
// 	        newcell.innerHTML = table.rows[0].cells[i].innerHTML;
// 	        switch(newcell.childNodes[0].type) {
// 	            case "text":
// 	                    newcell.childNodes[0].value = "";
// 	                    break;
// 	            case "select-one":
// 	                    newcell.childNodes[0].selectedIndex = 0;
// 	                    break;
// 	        }
// 	    }
// 	}

// 	function deleteText(tableID) {
// 	    try {
// 	    var table = document.getElementById(tableID);
// 	    var rowCount = table.rows.length;
	
// 	    for(var i=0; i<rowCount; i++) {
// 	        var row = table.rows[i];
// 	        var chkbox = row.cells[0].childNodes[0];
// 	        if(null != chkbox && true == chkbox.checked) {
// 	            if(rowCount <= 1) {
// 	                alert("Cannot delete all the rows.");
// 	                break;
// 	            }
// 	            table.deleteRow(i);
// 	            rowCount--;
// 	            i--;
// 	        }
// 	    }
// 	    }catch(e) {
// 	        alert(e);
// 	    }
// 	}
	
	function save() {
		if(validateDetail()){
			if(document.forms[0].task.value == 'insertGroupClass'){
				document.forms[0].task.value = "insertGroupClassExe";
			}else{
				document.forms[0].task.value = "updateGroupClassExe";
			}				
			document.forms[0].submit();
		}
	}
	
	function validateDetail(){
		var tableList = document.getElementById("classOptionList"); //find table
		var rowList = tableList.getElementsByTagName("tr");
		var rowCount = tableList.getElementsByTagName("tr").length;  //get table length
		var totDetailWeight = 0;
		
		//set select value
// 		for(var i=0; i<rowCount; i++){
// 			rowList[i].children[0].children[0].value = rowList[i].getElementsByTagName("select")[0].value;
// 		}
		
		for(var i=0; i<rowCount; i++){
			var textNode = rowList[i].children[1].children[0];  //tracing node
	 	    var selectNode = rowList[i].getElementsByTagName("select");
			totDetailWeight += parseInt(textNode.value);
			
	 	   for(var j=0; j<rowCount; j++){
	 		   if(i != j){
	 			   if(selectNode[0].value == 0){
	 					alert("Class can not be empty!");
	 				   	return false;
	 			   }
	 			   if(selectNode[0].value == rowList[j].getElementsByTagName("select")[0].value){
	 				   alert("Class can not be duplicated in one group!");
	 				   return false;
	 			   }	 			  
	 		   }
	 	   }	 	   
	 	   //alert(totDetailWeight);	 	   
		}
		
		if(totDetailWeight != 100){
 		   alert("Total weight of all classes must be equal to 100!");
 		   return false;
 	   }
		
		return true;
	}
	
	function resetNumberAnswer(){
		var tableList = document.getElementById("classOptionList"); //find table
		var rowList = tableList.getElementsByTagName("tr");
		var rowCount = tableList.getElementsByTagName("tr").length;  //get table length
		
		for(var i=0; i<rowCount; i++){
			(rowList[i].getElementsByTagName("img"))[0].id = i;
		}
	}
	
	function appendText() {	
		var tableList = document.getElementById("classOptionList"); //find table
		var rowCount = tableList.getElementsByTagName("tr").length;  //get table length
		var row;
		
		var newRowHTML = document.getElementById("tabelClassOption");  //get inner HTML form		 	   
 	   	var newRow = newRowHTML.innerHTML;
 		row = tableList.insertRow(rowCount);  //insert new row into table 		
		row.innerHTML = newRow;
		row.id = "tabelClassOption";
		
		//reset fields
		var textNode = row.children[1].children[0];  //tracing node
 	    var selectNode = row.getElementsByTagName("select");
 	    textNode.value = "0";
 	    selectNode[0].selectedIndex = 0;	
 	   	resetNumberAnswer();  //reset value & id	 	        
	}
	
	function deleteText(rowID){
		//alert(rowID);
		var tableList = document.getElementById("classOptionList"); //find table
		var rowCount = tableList.getElementsByTagName("tr").length; 
		var rowList = tableList.getElementsByTagName("tr");
		
		if(rowCount <= 1){
			alert("Class must be at least 1!");
		}else{			
			tableList.deleteRow(rowID);
		}				
		resetNumberAnswer();
	}
</script>
<title>Manage Group Class</title>
</head>
<html:javascript formName="schoolForm" dynamicJavascript="true" staticJavascript="true" method="validateForm" page="2"/>
<body onload="javascript:resetNumberAnswer();">
	<%
		if(session.getAttribute("result") != null)
		{
			String message = session.getAttribute("result").toString();
			%>
				<script type="text/javascript">
					window.alert('<%=message%>');
				</script>
			<%
			session.removeAttribute("result");
		}
	%>
	<center>
		<table width="100%" class="bodyTable boxShadow">
		
			<!-- Header -->
			<tr>
				<td colspan="2"><%@include file="/include/Header.jsp"%></td>
			</tr>
		
			<!-- Content -->
			<tr>
				<td rowspan="2" width="200px" class="navigationBox"><%@include file="/include/Navigation.jsp"%></td>
				<td align="left" class="headerBox blueBackground">
					Setting > <a href="javascript:flyToPage('manageGroupClass');">Manage Group Class</a> > 
					<logic:notEqual value="insertGroupClass" property="task" name="schoolForm">
						Update Group Class
					</logic:notEqual>
					<logic:equal value="insertGroupClass" property="task" name="schoolForm">
						Add New Group Class
					</logic:equal>
				</td>
			</tr>
			<tr>
				<td align="center"  class="contentStyle"><br><br>
					<html:form action="/Master" method="post">
					<html:hidden name="schoolForm" property="task"/>
					<html:hidden name="schoolForm" property="groupClassId"/>
						<table border="0" align="center" class="boxShadow" width="340px">
							<tr class="headerBox greyBackground">
								<th align="center" class="headerBox formHeaderBackground" colspan="3">
									<logic:notEqual value="insertGroupClass" property="task" name="schoolForm">
										Update Group Class
									</logic:notEqual>
									<logic:equal value="insertGroupClass" property="task" name="schoolForm">
										Add New Group Class
									</logic:equal>
								</th>
							</tr>
							<tr> 
								<td class="formListStyle leftAlign">Group Class Name</td>
								<td class="formListStyle">:</td>
								<td class="formListStyle leftAlign"><html:text property="groupClassName" name="schoolForm" /></td>
							</tr>
							<tr>
								<td class="formListStyle leftAlign">Group Class Weight</td>
								<td class="formListStyle">:</td>
								<td class="formListStyle leftAlign"><html:text property="groupClassWeight" name="schoolForm" styleClass="textSmall"/> %</td>
							</tr>
<!-- 							</table> -->
<!-- 							<table align="center" id="tabel1" border = "0" class="boxShadow"> -->
<!-- 							        <tr> -->
<!-- 							        	<td><input type="checkbox" name="chk"/></td> -->
<!-- 							            <td> -->
<%-- 							                <html:select name="schoolForm" property="classId"> --%>
<%-- 							                	<html:option value="0">Select</html:option> --%>
<%-- 							                	<html:optionsCollection name="schoolForm" property="classList" label="className" value="classId"/> --%>
<%-- 							                </html:select> --%>
<!-- 							            </td> -->
<%-- 							            <td><html:text name="schoolForm" property="classWeight" /></td> --%>
<!-- 							        </tr> -->
<!-- 							</table> -->
<!-- 							<table> -->
							<tr>
								<td align="center" colspan="3"></td>
							</tr>
							<tr>
								<td align="center" class="headerBox formHeaderBackground" colspan="3">Class List</td>
							</tr>
							<tr>
								<td colspan="3">
									<table align="center" id="classOptionList"  border="0" width="90%">										
										<logic:notEmpty name="schoolForm" property="groupClassList">
											<logic:iterate id="listData" name="schoolForm" property="groupClassList">
										        <tr id="tabelClassOption">										            
										            <td class="formListStyle" width="62%">
<%-- 										            	<html:hidden name="listData" property="classId"/> --%>
										               	<html:select name="listData" property="classId" styleClass="comboStretch">
										                	<html:option value="0">Select</html:option>
										                	<html:optionsCollection name="schoolForm" property="classList" label="className" value="classId"/>
										                </html:select>
<!-- 										                <select> -->
<!-- 										                	<option value="0">Select</option> -->
<%-- 															<logic:iterate id="listClassData" name="schoolForm" property="classList"> --%>
<%-- 																<logic:notEmpty name="schoolForm" property="classList"> --%>
<%-- 																	<option value='<bean:write name="listClassData" property="classId"/>'><bean:write name="listClassData" property="className"/></option> --%>
<%-- 																</logic:notEmpty> --%>
<%-- 															</logic:iterate> --%>
<!-- 														</select>										                 -->
										            </td>
										            <td class="formListStyle">
										            	<html:text property="grClassDetailWeight" name="listData" styleClass="textSmall"/>&nbsp;%
										            </td>
										            <td align="center" class="formListStyle" width="10%">
														<img src="images/cancelButton.png" title="delete" style="cursor: pointer;" onclick="javascript:deleteText(this.id);"/>
										            </td>
										        </tr>
											 </logic:iterate>
										</logic:notEmpty>
									</table>
								</td>
							</tr>
							<tr>
								<td align="center" style="padding:5px 7px;" colspan="3">
<!-- 									<input type="button" class="buttonStyle" style="width: auto;" Value="Add Option" onclick="javascript:appendText('tabel1')"> -->
<!-- 									<input type="button" class="buttonStyle" style="width: auto;" Value="Delete Option" onclick="javascript:deleteText('tabel1')"> -->
									<div title="add option" style="cursor:pointer;" onclick="javascript:appendText();">
										<table>
											<tr>
												<td style="vertical-align: middle; padding:2px;"><img src="images/addButton.png"></td>
												<td style="vertical-align: middle; padding:2px;"><b>Add Option</b></td>
											</tr>
										</table>
									</div>
								</td>
							</tr>
							<tr>
								<td colspan="3" align="center">
									<table>
										<tr>
											<td align="right" class="formListStyle" width="50%">
												<table title="save" class="buttonStyle" style="cursor: pointer; width:100%;" onclick="javascript:save();">
													<tr>
														<td style="vertical-align:middle;"><img src="images/saveButton.png"/></td>
														<td style="vertical-align:middle;"><b>&nbsp;Save&nbsp;</b></td>
													</tr>
												</table>
											</td>
											<td align="left" class="formListStyle" width="50%">			
												<table title="cancel" class="buttonStyle" style="cursor: pointer; width:100%;" onclick="javascript:flyToPage('manageGroupClass');">
													<tr>
														<td style="vertical-align:middle;"><img src="images/cancelButton.png"/></td>
														<td style="vertical-align:middle;"><b>&nbsp;Cancel&nbsp;</b></td>
													</tr>
												</table>
											</td>
										</tr>
									</table>									
								</td>
<!-- 								<td colspan="3" align="center" style="padding:5px 7px;"><input type="button" class="buttonStyle" value="Save" onclick="javascript:save()"></td> -->								
							</tr>
						</table>
					</html:form>
					<br><br>
				</td>
			</tr>
			
			<!-- Footer -->
			<tr>
				<td align="center" colspan="2" class="headerBox blueBackground">&copy; OME. 2014. All Rights Reserved.</td>
			</tr>
		</table>
	</center>	
</body>
</html>